<script setup>
import GameListItem from "@/components/FrontComponents/GameListItem.vue";
import {ref, onMounted} from "vue";
import GameListShowCard from "@/components/FrontComponents/GameListShowCard.vue";
import {gamePageListGetAPI} from "@/api/FrontApi/game.js";
import {useRouter} from "vue-router";

const pageParams = ref({
  page: 1,
  pageSize: 10,
  type: 1
})
const pageListData = ref([])

const getPageListData = async () => {
  const res = await gamePageListGetAPI(pageParams.value)
  pageListData.value = res.records
  focusedItem.value = res.records[0]
}

onMounted(() => getPageListData())

const itemIndex = ref(0)
const focusedItem = ref({})

// 鼠标触碰到item的逻辑
const itemOnFocus = (index, item) => {
  itemIndex.value = index
  focusedItem.value = item
}

// 切换列表
const changeList = (type) => {
  pageParams.value.type = type
  getPageListData()
}

// 查看更多
const router = useRouter()
const more = () => {
  if (pageParams.value.type === 1) {
    router.push('/store/ranking')
  } else if (pageParams.value.type === 2) {
    router.push('/store/newgame')
  }
}
</script>

<template>
  <div class="store-ranking-list">
    <div class="container">
      <div class="panel">
        <span @click="changeList(1)">热销商品</span>
        <span @click="changeList(2)">最新商品</span>
      </div>
      <div class="body">
        <div class="left">
          <div class="list">
            <div
                class="item"
                v-for="(item, index) in pageListData"
                :key="item"
                @mouseover="itemOnFocus(index, item)">
              <GameListItem
                  :is-focus="index === itemIndex" :game="item"></GameListItem>
            </div>
          </div>
          <div class="footer">
            <span class="more" @click="more">查看更多</span>
          </div>
        </div>
        <div class="right">
          <GameListShowCard :game="focusedItem"></GameListShowCard>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.store-ranking-list {
  margin-bottom: 100px;
  .container {
    width: 940px;
    margin: 0 auto;
    .panel {
      span {
        padding: 4px 6px;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        border-radius: 4px;
        background-color: $themeColor;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        &:hover {
          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
          color: #cccccc;
        }
      }
    }
    .body {
      display: flex;
      .left{
        width: 618px;
        margin-right: 14px;
        height: 780px;
        .list {
          .item {
            margin: 10px 0;
          }
        }
        .footer {
          height: 40px;
          padding: 0 10px;
          color: #cccccc;
          background-color: $decorativeColor;
          display: flex;
          justify-content: end;
          align-items: center;
          .more {
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            background-color: $secondaryColor;
            box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
            color: $textColor;
            &:hover {
              box-shadow: 0 0 0 rgba(0, 0, 0, 0);
              color: #cccccc;
            }
          }
        }
      }
      .right {

      }
    }
  }
}
</style>
